<template>
  <div class="coordinates">
    <template v-show="show_graph">
        <div ref="ele" style="width:1294px;height:218px">

        </div>
    </template>
    <div v-show="!show_graph" class="error-hints">
      <span>
          {{error_hint}}
      </span>

    </div>
  </div>
</template>

<script>
/* eslint-disable */
// import * as d3 from "d3";
import _ from "lodash";
import Vue from "vue";
import randomstring from "randomstring";
import echarts from "echarts";
import Debug from "debug";
import axios from "axios";
import superagent from "superagent";

// import VueAxis from "./VueAxis";
import { throws } from "assert";
// Vue.component("vue-axis", VueAxis);

const dbg = Debug("ParaCoord.vue");
dbg.enabled = true;

const SIZE_SETTING = {
  outer_width: 1020,
  outer_height: 218,
  padding: { left: 30, right: 30, top: 20, bottom: 10 }
};

export default {
  name: "Paralell-Coordinates",
  data() {
    return {
      show_graph: false,
      attributes: [],
      error_hint: "NO DATA",
      chart: echarts.init(document.createElement("null")),
      raw_input: {
        schemes: [],
        type_datas: [],
        hightlight_points: []
      }
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs["ele"]);
  },
  computed: {
    dates() {
      return this.$store.state.brushed_dates;
    },
    types() {
      return this.$store.state.brushed_types;
    },
    brushed_dates_and_types() {
      return [this.dates, this.types];
    },
    highlight_testids() {
      return this.$store.state.highlight_testids;
    },
    starterId() {
      return this.$store.state.starterId;
    },
    abnormal_type2color() {
      return this.$store.state.abnormal_type2color;
    },
    abnormal_type2comment() {
      return this.$store.getters["abnormal_type2comment"];
    },
    highlight_params() {
      return {
        starterId: this.starterId,
        attrs: this.attributes,
        test_ids: this.highlight_testids
      };
    },
    opt_highlight_series() {
      if (this.raw_input.hightlight_points.length) {
        return [
          {
            type: "parallel",
            name: "highlight",
            data: this.raw_input.hightlight_points.map(e => e["data"]),
            lineStyle: {
              normal: {
                color: "red",
                type: "solid",
                width: 3,
                shadowBlur: 15,
                shadowColor: "black"
              }
            }
          }
        ];
      } else {
        return [];
      }
    },
    opt_series() {
      return this.raw_input.type_datas.map(e => {
        return {
          name: e["type"],
          type: "parallel",
          data: e["data"],
          lineStyle: {
            normal: {
              color: this.abnormal_type2color[
                this.abnormal_type2comment[e["type"]]
              ],
              opacity: 0.45
            }
          }
          // smooth: true
        };
      });
    },
    opt_parallelAxis() {
      return this.raw_input.schemes.map(e => {
        return {
          dim: e["index"],
          name: e["text"]
        };
      });
    },
    opt_echarts() {
      let vue = this;
      return {
        backgroundColor: "white",
        parallelAxis: this.opt_parallelAxis,
        tooltip: {
          trigger: "axis"
        },
        parallel: {
          left: 40,
          right: 40,
          top: 30,
          bottom: 35,
          axisExpandable: true,
          axisExpandCenter: 0,
          axisExpandCount: 10,
          axisExpandWidth: 70,
          axisExpandTriggerOn: "mousemove",
          parallelAxisDefault: {
            nameGap: 5,
            nameTextStyle: {
              //   color: "red",
              fontSize: 12,
              fontWeight: "bold",
              shadowColor: "#FF0",
              shadowBlur: 20,
              shadowOffsetX: 2
            },
            splitNumber: 4,
            realtime: false,
            nameLocation: "start",
            scale: true,
            nameRotate: -15,
            tooltip: {
              show: true
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            z: 100
          }
        },
        series: [...this.opt_series, ...this.opt_highlight_series],
        legend: {
          formatter: function(param) {
            if (Number.isNaN(Number(param))) {
              return param;
            }
            return vue.abnormal_type2comment[param];
          },
          tooltip: {
            show: true,
            formatter: function(params, ticket, callback) {
              if (params["name"] == "highlight") {
                return vue.highlight_testids.join(" / ");
              } else {
                return null;
              }
            }
          }
        }
      };
    }
  },
  methods: {
    /**@api public */
    async updateAttributesv2(attrs) {
      this.attributes = attrs;
      // debugger
      if (attrs.length == 0) {
        this.show_graph = false;
        return (this.error_hint = "NO DATA");
      }
      if (attrs.length == 1) {
        this.show_graph = false;
        return (this.error_hint = "NEED AT LEAST TWO AXISES");
      }

      if (this.dates.length == 0 || this.types.length == 0) {
        return (this.error_hint = "NO BRUSH DATA");
      }

      this.show_graph = true;
      // this.chart.clear(); //强行清除,否则在变更轴的个数的时候会出现dim相关的bug
      this.chart.showLoading();

      let query_params = {
        starterId: this.starterId,
        attrs: attrs,
        dates: this.dates,
        types: this.types
      };
      let p = await axios.get("/starter/feature/coord_v2/", {
        params: query_params
      });
      let schemes = p.data["schemes"];
      let types = p.data["types"].filter(e => e.data.length > 0);

      this.raw_input.schemes = p.data["schemes"];
      this.raw_input.type_datas = p.data["types"].filter(
        e => e.data.length > 0
      );
      this.chart.hideLoading();
    }
  },
  watch: {
    brushed_dates_and_types() {
      if (this.attributes.length) {
        this.updateAttributesv2(this.attributes);
      }
    },
    opt_echarts(val) {
      this.chart.clear();
      this.chart.setOption(val);
    },
    highlight_params: async function(val) {
      // if (this.attributes.length) {
      // let query_params = val;
      // let request = axios.get("/starter/feature/coord_highlight/", {
      //   params: query_params
      // });
      // let axiosRespData = (await request).data;
      // this.raw_input.hightlight_points = axiosRespData["highlight_datas"];
      // }
    }
  }
};
</script>

<style lang="less" scoped>
.coordinates {
  position: relative;
  height: 234px;
  // border-top: 1px solid #dddee1;
  border-bottom: 1px solid #dddee1;
  .error-hints {
    font-size: 50px;
    color: #f7f7f7;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 2px black;
  }
  svg {
    path.line {
      fill: none; //避免变成填充颜色的多边形
      stroke: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
